<template>
  <div class="min-h-screen flex flex-col">
    <!-- 主要内容区域 -->
    <main class="flex-grow">
      <!-- 轮播图区域 -->
      <section class="mb-8">
        <HomeCarousel />
      </section>

      <!-- 热门新闻列表 -->
      <section class="container mx-auto px-4 mb-8">
        <Tabs default-value="hot" class="w-full">
          <TabsList class="mb-6">
            <TabsTrigger value="hot">热门新闻</TabsTrigger>
            <TabsTrigger value="latest">最新发布</TabsTrigger>
            <TabsTrigger value="recommended">推荐阅读</TabsTrigger>
          </TabsList>
          <TabsContent value="hot">
            <HomeHotNews type="latest" />
          </TabsContent>
          <TabsContent value="latest">
            <HomeHotNews type="" />
          </TabsContent>
          <TabsContent value="recommended">
            <HomeHotNews type="recommended" />
          </TabsContent>
        </Tabs>
      </section>
    </main>
  </div>
</template>

<script setup lang="ts">
import { Tabs, TabsList, TabsTrigger, TabsContent } from '@/components/ui/tabs'
import HomeCarousel from './components/HomeCarousel/HomeCarousel.vue'
import HomeHotNews from './components/HomeHotNews/HomeHotNews.vue'
</script>
